import React, { useState } from "react";
import TodoList from "./components/list";
import { Input, Button, message } from "antd";
import "./App.scss";
function App() {
  const [inputValue, setValue] = useState("");
  const [todoItem, setTodoItem] = useState({});
  const handleInputChange = (e: any) => {
    setValue(e.target.value);
  };
  const handleClick = () => {
    console.log(inputValue);

    if (!inputValue) return message.warning("请输入待办事项", 3);
    setTodoItem({ content: inputValue });
    setValue("");
  };
  return (
    <div className="App">
      <header className="App-header">
        <h1>Todo List</h1>
        <div className="search-box">
          <Input value={inputValue} onChange={handleInputChange} />
          <Button className="useStyle" type="primary" onClick={handleClick}>
            添加
          </Button>
        </div>
        <TodoList todoItem={todoItem}></TodoList>
      </header>
    </div>
  );
}

export default App;
